<template>
  <el-upload
    :disabled="disabled"
    :action="uploadUrl"
    :before-upload="beforeUpload"
    :on-success="uploadSuccess"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    :style="{'marginTop':(disabled && fileList.length !== 0) ? '-40px' : '0px'}"
    class="upload-demo"
    with-credentials
    style="width:50%;"
  >
    <!-- 详情(disabled)不可编辑 控制显示隐藏 -->
    <el-button v-if="!disabled" :disabled="disabled" size="mini" type="primary" icon="el-icon-upload">
      资料上传
    </el-button>
    <el-button v-if="downloadZipState" :disabled="disabled" size="mini" icon="el-icon-download" @click.prevent.stop="downloadAll">
      全部下载
    </el-button>
    <div v-if="!disabled" slot="tip" class="el-upload__tip">
      附件大小不超过10M
    </div>
    <span v-if="fileList.length === 0 && disabled">暂无附件</span>
  </el-upload>
</template>
<script>
import clonedeep from 'lodash.clonedeep'

// 上传
import {
  upLoadApi
} from '@/utils/http.js'

export default {
  name: 'UploadAttachment',
  model: {
    prop: 'fileList',
    event: 'change'
  },
  props: {
    // 无效
    disabled: {
      type: Boolean,
      default: false
    },
    // 按钮的尺寸
    buttonSize: {
      type: String,
      default: 'mini'
    },
    fileList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      // 是否操作过
      handled: false,
      uploadUrl: upLoadApi('/commonFile/upload'),
      downloadUrl: upLoadApi('/commonFile/download'),
      downloadZipUrl: upLoadApi('/commonFile/downloadByZip')
    }
  },
  computed: {
    downloadZipState () {
      return this.fileList.length > 0 && !this.handled && !this.disabled
    }
  },
  methods: {
    downloadAll () {
      const uuid = this.$route.query.uuid
      if (uuid) {
        // console.log(this.fileList)
        window.location.href = this.downloadZipUrl + `?businessUuid=${uuid}`
      }
    },
    beforeUpload (file) {
      // console.log('file1:', file)
      const isLt2M = file.size / 1024 / 1024 < 10
      let extension = []
      if (this.pickFileTake === 1) {
        extension = ['pdf', 'doc', 'docx']
      } else {
        extension = ['bmp', 'jpg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd', 'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'wmf', 'webp', 'pdf', 'txt', 'doc', 'xls', 'docx', 'xlsx', 'rar', 'zip']
      }
      // console.log(file.name)
      const extensionName = file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase()
      // console.log('extensionName:', extensionName)
      const isSxtension = extension.indexOf(extensionName) > -1
      if (!isLt2M) {
        this.$message.error('上传附件大小不能超过 10MB!')
      } else if (!isSxtension) {
        this.$message.error('上传附件格式不正确!')
      }
      return isLt2M && isSxtension
    },
    uploadSuccess (res) {
      this.handled = true
      console.log(res)
      if (res.code === '0000') {
        const { fileName, uuid } = res.data
        this.fileList.push({ name: fileName, uuid })
        this.$emit('change', this.fileList)
      }
    },
    handleRemove (file, fileList) {
      this.handled = true
      console.log(file, fileList)
      const fileList2 = clonedeep(fileList)
      this.$emit('change', fileList2)
    },
    handlePreview (file) {
      console.log(file)
      window.location.href = this.downloadUrl + `?uuid=${file.uuid}`
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>
